<template>
    <div class="todo-list">
        <div class="todo-item" v-for="(todo, index) in todos" :key="index">
            <input type="checkbox" v-model="todo.completed" />
            <span :class="{ 'completed': todo.completed }">{{ todo.text }}</span>
            <button @click="deleteTodo(index)">Delete</button>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        todos: {
            type: Array,
            required: true
        }
    },
    emits: ['delete-todo'],
    methods: {
        deleteTodo(index) {
            this.$emit('delete-todo', index)
        }
    }
}
</script>

<style scoped>
.todo-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.todo-item {
    display: flex;
    align-items: center;
    background-color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.todo-item input[type="checkbox"] {
    margin-right: 0.5rem;
}

.todo-item span {
    flex: 1;
    font-size: 1rem;
}

.todo-item span.completed {
    text-decoration: line-through;
    color: #999;
}

.todo-item button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
}
</style>
